import { View } from '@tarojs/components'
import { Component } from '@tarojs/taro'
import Chart from './charts/index'

const http = require('../../utils/http.js')
const constant = require('../../utils/constant.js')

export default class Stats extends Component {
    config = {
        navigationBarTitleText: '系统统计',
    }
    constructor(props) {
        super(props)
        this.state = {
            typeOption: {},
            typeLoading: false,
            opTotalOption: {},
            opTotalLoading: false,
        }
    }

    componentDidMount() {
        this.fetchTypeTatal()
        this.fetchOpTatal()
    }
    fetchTypeTatal = () => {
        this.setState({ typeLoading: true })
        http.get2('/api/note/type/statistics')
            .then(res => {
                var list = res
                var nameArr = [], valueArr = []
                list.forEach(so => {
                    nameArr[nameArr.length] = so.name
                    valueArr[valueArr.length] = so.noteNumber
                    so["value"] = so.noteNumber
                })
                var typeOption = {
                    title: { text: '分类统计', x: 'left' },
                    color: [
                        '#C1232B', '#B5C334', '#FCCE10', '#E87C25', '#27727B',
                        '#FE8463', '#9BCA63', '#FAD860', '#F3A43B', '#60C0DD',
                        '#D7504B', '#C6E579', '#F4E001', '#F0805A', '#26C0C0', '#00000F'
                    ],
                    tooltip: { trigger: 'item', formatter: '{a} \n{b} : {c} ({d}%)' },
                    legend: { orient: 'vertical', x: 'left', y: 'center', data: [] }, //, data: nameArr 
                    series: [{
                        name: '笔记数', type: 'pie', radius: '55%', center: ['50%', '50%'],
                        data: list,
                        itemStyle: {
                            emphasis: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' }
                        }
                    }]
                };
                this.setState({ typeOption, typeLoading: false })
            })
    }
    fetchOpTatal = () => {
        this.setState({ opTotalLoading: true })
        http.get2('/api/note/stats/stats-total')
            .then(res => {
                var list = res
                var nameArr = []
                list.forEach(so => {
                    nameArr[nameArr.length] = so.name
                })
                var opTotalOption = {
                    title: { text: '操作总统计', x: 'left' },
                    color: ['#66AEDE', '#90EC7D', '#CA8622'],
                    tooltip: { trigger: 'item', formatter: '{a} \n{b} : {c} ({d}%)' },
                    legend: { orient: 'vertical', x: 'left', y: 'center', data: [] }, //, data: nameArr 
                    series: [{
                        name: '操作数', type: 'pie', radius: '55%', center: ['50%', '50%'],
                        data: list,
                        itemStyle: {
                            emphasis: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' }
                        }
                    }]
                };
                this.setState({ opTotalOption, opTotalLoading: false })
            })
    }
    copyWebsite = () => {
        Taro.setClipboardData({ data: constant.WEBSITE_STATS }).then(() => {
            Taro.showToast({ title: '链接已复制' })
        })
    }

    render() {
        return (
            <View >
                <Chart
                    option={this.state.typeOption}
                    height='700rpx'
                />
                <Chart
                    option={this.state.opTotalOption}
                    height='700rpx'
                />
                <View style={{ marginTop: '20rpx', marginBottom: '10rpx' }}>
                    <View className='at-article'>
                        <View className='at-article__p'>
                            查看更多统计请访问官网：
                        </View>
                        <View className='at-article__p' style={{ color: '#FF00EF' }} onClick={this.copyWebsite}>
                            {constant.WEBSITE_STATS}
                        </View>
                    </View>
                </View>
            </View>
        )
    }
}
